<template>
  <div>
      <h2>用户管理</h2>
      <div class="space-div2"></div>
      <Button type="success" icon="android-person-add" @click="modal2 = true">新增</Button>
      <Button type="error" icon="close" @click="removes">删除</Button>
      
      <Input placeholder="Enter something..." v-model='nsearch' style="width: 200px"></Input> 
      <Button type="primary" shape="circle" @click="Search" icon="ios-search"></Button>
      <br>
      <div class="space-div"></div>
      <Table border ref="selection" :columns="columns7" :data="data1" @on-selection-change="onSelectionChange"></Table>
      <div class="space-div"></div>
      <Page :total="data.total" @on-change = "onChangePage" size="small" show-elevator show-sizer></Page>
      <div class="space-div2"></div>
      <Button @click="handleSelectAll(true)" icon="ios-star">全选</Button>
      <Button @click="handleSelectAll(false)" icon="reply-all">取消全选</Button>
      <div class="space-div2"></div>
    <Modal
        v-model="modal2"
        title="用户添加"
        >
        <Form label-position="top" ref="formValidate" :model="formValidate">
            <FormItem label="用户名" prop="name">
                <Input type="text" v-model="formValidate.name"></Input>
            </FormItem>
            <FormItem label="密码" prop="password">
                <Input type="password" v-model="formValidate.password"></Input>
            </FormItem>
            <FormItem label="简介" prop="introduce">
                <Input v-model="formValidate.introduce" type="textarea" :rows="4"></Input>
                <quill-editor :content="formValidate.introduce">
                    :options="editorOption"
                    @change="onEditorChange($event)"
                </quill-editor>
            </FormItem>
            <FormItem>
                  <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                  <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
              </FormItem>
        </Form>
    </Modal>
    <Modal
        v-model="modal1"
        title="用户编辑"
        @on-ok="ok"
        @on-cancel="cancel"
        v-for="(data,key) in data1"
        >
        <Form label-position="top" ref='data1[num]' :model='data1[num]'>
            <FormItem label="用户名" prop="name">
                <Input type="text" v-model="data1[num].name">data1[num].name</Input>
            </FormItem>
            <FormItem label="密码" prop="password">
                <Input type="password" v-model="data1[num].password"></Input>
            </FormItem>
            <FormItem label="简介" prop="introduce">
                <Input v-model="data1[num].introduce" type="textarea" :rows="4"></Input>
                <quill-editor :content="data1[num].introduce">
                    :options="editorOption"
                    @change="onEditorChange($event)"
                </quill-editor>
            </FormItem>
            <FormItem>
                  <Button type="primary" @click="updata(data1[num])">更新</Button>
                  <Button type="ghost" @click="handleReset(data1[num])" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
    </Modal>
  </div>
</template>

<script>
import Base from '../common/Base';

    export default {
        mixins:[Base],
        data () {
            return {
                modal3:'users',
                columns7: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '用户名',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person-stalker'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '密码',
                        key: 'password'
                    },
                    {
                        title: '简介',
                        key: 'introduce'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 180,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        icon:'edit'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            //this.show(params.index);
                                            this.num=params.index
                                            this.modal1 = true;
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        icon:'android-close'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                formValidate: {
                    name: '',
                    password: '',                
                    introduce: ''
                },
                
                
                
                ruleValidate: {
                    name: [
                        { required: true, message: '用户名不能为空', trigger: 'blur' }
                    ],
                   password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                   introduce: [
                        { required: true, message: '请介绍一下自己', trigger: 'blur' },
                        { type: 'string', min: 20, message: '介绍内容不少于20字', trigger: 'blur' }
                   ]
            }
        }
        },
        methods: {
            getData(obj){
            if(obj){
                this.$http({
                    method:'post',
                    data:{
                        name:obj
                    },
                    url:`http://10.31.153.25:3000/${this.modal3}/list`,
                }).then((response)=>{
                    this.data1=response.data.docs;
                    this.data.total=response.data.total;
                    this.data.page=response.data.page;
                })
            }else{
                this.$http({
                    method:'post',
                    data:{
                      limit:this.data.limit
                    },
                    url:`http://10.31.153.25:3000/${this.modal3}/list`,
                  })
                  .then((response) => {
                    
                    this.data1 = response.data.docs;
                    this.data.total = response.data.total
                    console.log(this.data1)
                  })
            }
          },
            
            onEditorChange({quill,html,text}){
                this.formValidate.introduce=html
            }
            
        }
    }
</script>

<style>
    .space-div{
        padding: 4px;
    }
    .space-div2{
        padding: 15px 0;
    }
    .ivu-card-body{
        padding: 27px
    }
    .ivu-modal .ivu-modal-content .ivu-modal-footer{
        display: none;
    }
</style>





